<template>
	<div class="onepage" ref="onepage">
		<!-- 注册弹窗start -->
		<Modal v-model="isShowRegister" footer-hide>
		   <registerForm @on-success-valid="handleRegister"></registerForm>
		</Modal>
		<!-- 注册弹窗end -->
		
		<!-- 注册成功弹窗start -->
		<Modal
		    v-model="isShowRegisterSuccess"
		    footer-hide
		    >
		   <registerSuccess></registerSuccess>
		</Modal>
		<!-- 注册成功弹窗end -->
		<!-- :style="{height:screenHeight+'px'}"-->
		<div class="demo-carousel">
			<!-- <div class="banner_btn" @click="handleLogin" v-show="tab=='0'"><img :src="icon.btn" alt=""></div> -->
			<div class="banner_btn1" @click="showContact" v-show="tab=='2'"><img src="@/assets/01/bt1.png" alt=""></div>
			<div class="banner_btn1" @click="showContact" v-show="tab=='1'"><img src="@/assets/01/bt2.png" alt=""></div>
			<img src="@/assets/01/bg1.jpg" v-show="tab=='0'" />
			<img src="@/assets/01/bg2.jpg" v-show="tab=='1'" />
			<img src="@/assets/01/bg3.jpg" v-show="tab=='2'" />

			<div class="one_banner" v-show="tab=='0'">
				<div class="title1">颜述-达人种草平台</div>
				<div class="title2">品牌免费招募</div>
				<div class="title3">
					<img src="@/assets/01/title0.png" alt="">
					<span>新品孵化从0-1</span>
				</div>
				<div class="title3">
					<img src="@/assets/01/title2.png" alt="">
					<span>爆款持续种草</span>
				</div>
				<div class="title3">
					<img src="@/assets/01/title3.png" alt="">
					<span>品牌整合营销</span>
				</div>
				<div class="btn" @click="handleLogin">免费试用</div>
			</div>
		</div>
		<div class="data_nav" v-show="show" :style="{'bottom':tab=='0'?'0px':'-80px'}">
			<svg class="waves" viewBox="0 24 150 38" preserveAspectRatio="none" shape-rendering="auto">
				<defs>
					<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
				</defs>
				<g class="parallax">
					<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
					<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
					<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
					<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
				</g>
			</svg>
		</div>
		<transition name="slide-fade" v-if="tab=='0'">
			<div class="data_navs" v-show="show">
				<div>
					<span class="data_title">入驻达人数</span>
					<span>80000+</span>
				</div>
				<div>
					<span class="data_title">平台日活</span>
					<span>10000+</span>
				</div>
				<div>
					<span class="data_title">已入驻商家</span>
					<span>3000+</span>
				</div>
			</div>
		</transition>

	</div>
</template>

<script>
	import '@/assets/css/default.css'
	import registerForm from '../Login/register-form.vue';
	import registerSuccess from '../Login/registerSuccess.vue';
	export default {
		name: 'onePage',
		props: ['tab'],
		components:{
			registerForm,
			registerSuccess
		},
		data() {
			return {
				isShowRegister:false,
				isShowRegisterSuccess:false,
				show: false,
				login: {
					name: '',
					password: '',
					yzm: '',
					remember: false
				},
				loginType: 0,
				img: 0,
				height: ((document.body.clientHeight || document.documentElement.clientHeight) - 89) + 'px',
				screenHeight: (document.body.clientHeight || document.documentElement.clientHeight),
			}
		},
		methods: {
			handleRegister(){
				this.isShowRegister=false;
				this.isShowRegisterSuccess=true;
			},
			pageResize() {
				this.height = ((document.body.clientHeight || document.documentElement.clientHeight) - 89) + 'px'
				this.screenHeight = (document.body.clientHeight || document.documentElement.clientHeight) + 'px'
			},
			_isMobile() {
				let flag = navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				)
				return flag;
			},
			handleLogin() {
				if (this._isMobile()) {
					this.isShowRegister=true;//打开注册
				} else {
					let channel = sessionStorage.getItem('channel')
					if (channel) {
						this.$router.replace('/register')
						// window.open('https://cloud.redsay.net/login/1?channel=' + channel)
					} else {
						this.$router.replace('/register')
						// window.open('https://cloud.redsay.net/login/1?channel=100')
					}
					return
				}
			},
			showContact() {
				this.$emit('handleShowModal')
			}
		},
		created() {
			var that = this
			setTimeout(function() {
				that.show = true
			}, 300)
		},
		mounted() {
			var that = this
			window.onresize = () => {
				//调用methods中的事件
				that.pageResize();
			}
		}
	}
</script>


<style scoped>
	.banner_btn {
		z-index: 99;
	}

	.onepage {
		position: relative;
		width: 100%;
		float: left;
		/* margin-top: 60px; */
	}

	.demo-carousel img {
		width: 100%;
		height: 100%;
	}

	/* .ivu-carousel,.ivu-carousel-list,.ivu-carousel-item{
    height: 83% !important;
} */
	.ivu-carousel .ivu-carousel-dots-inside,
	.ivu-carousel .ivu-carousel-dots {
		bottom: 68px !important;
		top: 85% !important;
	}

	.data_navs {
		position: absolute;
		width: 50%;
		color: #fa586f;
		left: 25%;
		bottom: 35px;
		z-index: 99;
		height: 120px;
		border-radius: 30px;
		display: flex;
		justify-content: space-between;
	}

	.data_nav {
		position: absolute;
		left: 0;
		bottom: 0;
		overflow: hidden;
		height: 250px;
		width: 100%;

	}

	.waves {
		position: relative;
		width: 100%;
		height: 20vh;
		margin-bottom: -7px;
		/*Fix for safari gap*/
		min-height: 250px;
		max-height: 300px;
	}

	.parallax>use {
		animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
	}

	.parallax>use:nth-child(1) {
		animation-delay: -2s;
		animation-duration: 7s;
	}

	.parallax>use:nth-child(2) {
		animation-delay: -3s;
		animation-duration: 10s;
	}

	.parallax>use:nth-child(3) {
		animation-delay: -4s;
		animation-duration: 13s;
	}

	.parallax>use:nth-child(4) {
		animation-delay: -5s;
		animation-duration: 20s;
	}

	@keyframes move-forever {
		0% {
			transform: translate3d(-90px, 0, 0);
		}

		100% {
			transform: translate3d(85px, 0, 0);
		}
	}

	/*Shrinking for mobile*/
	@media (max-width: 768px) {
		.content {
			height: 30vh;
		}

		h1 {
			font-size: 24px;
		}
	}

	.data_navs div {
		width: 33.3%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.data_navs span {
		font-size: 2.1vw;
		font-weight: 700;
	}

	.data_title {
		color: #fa586f;
		font-size: 1.1vw !important;
		font-weight: 500 !important;
	}

	.login_nav_type {
		width: 100%;
		float: left;
		height: 55px;
		text-align: center;
		font-size: 1.5rem;
	}

	.unselected_login {
		float: left;
		width: 50%;
		line-height: 55px;
		height: 100%;
		color: #828282;
		border-bottom: 1px solid #DDDDDD;
	}

	.selected_login {
		float: left;
		width: 50%;
		line-height: 55px;
		height: 100%;
		color: #1BD2E1;
		border-bottom: 1px solid #1BD2E1;
	}

	/*移动 */
	@media only screen and (max-width: 600px) {
		.banner_btn {
			position: absolute;
			bottom: 4% !important;
			width: 60px !important;
			left: 52%;
			height: 20px;
		}

		.banner_btn1 {
			position: absolute;
			bottom: 16% !important;
			width: 65px !important;
			left: 54%;
			height: 16px;
		}

		.banner_btn img {
			width: 100%;
		}

		.demo-carousel {
			position: relative;
			height: 140px !important;
		}

		.demo-carousel img {
			height: auto !important;
		}

		.onepage {
			margin-top: 45px !important;
		}

		.data_navs {
			position: relative;
			width: 100%;
			z-index: 99;
			float: left;
			bottom: -25px;
			left: 0;
		}

		.data_navs div {
			width: 33.3%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
		}

		.data_navs span {
			font-size: 1.5rem;
			font-weight: 700;
		}

		.data_title {
			color: #fa586f;
			font-size: 1rem !important;
			font-weight: 500 !important;
		}

		.data_nav {
			height: 50px;
		}
	}

	@media only screen and (min-height:300px) and (max-height:700px) {
		.banner_btn {
			position: absolute;
			bottom: 29%;
			width: 150px;
			left: 62%;
		}

		.banner_btn1 {
			position: absolute;
			bottom: 22%;
			width: 170px;
			left: 50%;
		}

		.login_nav {
			position: absolute;
			right: 16%;
			background: #fff;
			top: 8%;
			width: 25%;
			border-radius: 32px;
		}

		.login_form {
			float: left;
			width: 100%;
			padding: 15px 0;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
	}

	@media only screen and (min-height:700px) and (max-height:1200px) {
		.banner_btn {
			position: absolute;
			bottom: 29%;
			width: 180px;
			left: 62%;
		}

		.banner_btn1 {
			position: absolute;
			bottom: 25%;
			width: 190px;
			left: 50%;
		}

		.login_form {
			float: left;
			width: 100%;
			padding: 35px 0;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

		.login_nav {
			position: absolute;
			right: 16%;
			background: #fff;
			top: 12%;
			width: 22%;
			border-radius: 32px;
		}
	}

	.login_form input {
		width: 80%;
		height: 40px;
		color: #828282;
		border: 1px solid #DDDDDD;
		padding: 0 10px;
		font-size: 1.3rem;
		margin-bottom: 20px;
	}

	.login_form_yzm {
		width: 80%;
		height: 40px;
		float: left;
		display: flex;
		margin-bottom: 20px;
		justify-content: space-between;
	}

	.accord_password {
		width: 80%;
		height: 40px;
		float: left;
		display: flex;
		justify-content: space-between;
	}

	.login_form_yzm span {
		color: #51ABFF;
	}

	.login_form_yzm input {
		width: 60%;
		height: 40px;
		color: #828282;
		border: 1px solid #DDDDDD;
		padding: 0 10px;
		font-size: 1.3rem;
		margin-bottom: 20px;
	}

	.login_form_yzm img {
		width: 35%;
		height: 100%;
	}

	.login_btn {
		width: 80%;
		height: 40px;
		border-radius: 24px;
		color: #fff;
		border: 1px solid #1BD2E1;
		background: #1BD2E1;
		margin-bottom: 20px;
	}

	.register_btn {
		width: 80%;
		height: 40px;
		border-radius: 24px;
		color: #1BD2E1;
		background: #fff;
		border: 1px solid #1BD2E1;
	}

	.slide-fade-enter-active {
		transition: all .5s ease;
	}

	.slide-fade-leave-active {
		transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	}

	.slide-fade-enter,
	.slide-fade-leave-to

	/* .slide-fade-leave-active 用于 2.1.8 以下版本 */
		{
		transform: translateY(200px);
		opacity: 0;
	}
</style>
